<template>
  <div class="productDetails">
    <div class="product-search-swiper">
      <div class="s-left">
        <van-icon name="arrow-left" />
      </div>
      <div class="product-search">
        <van-search
          v-model="value"
          placeholder="搜索商品"
          shape="round"
          color="black"
        />
      </div>
      <p class="s-right"><van-icon name="ellipsis" /></p>
    </div>
    <!-- 轮播图 -->
    <div class="product-swiper">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        style="height: 375px"
      >
        <van-swipe-item
          style="background-color: #39a9ed"
          v-for="(item, index) in detailscon.slice(1)"
          :key="index"
        >
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 商品详情0.01 -->
    <div class="goods-info">
      <div class="goods-info-con" v-if="details">
        <div class="goods-wrap">
          <div class="info-prict">
            <span><em>￥</em>{{ details.price }}</span>
            <!-- <p><van-icon name="link-o" /></p> -->
          </div>
          <p class="details.avatar">{{ details.storeName }}</p>
          <div class="good-sales">
            <p>原价:<em>￥</em>{{ details.otPrice }}</p>
            <p>库存:{{ details.stock }}{{ details.unitName }}</p>
            <p>销量:{{ details.sales }}{{ details.unitName }}</p>
          </div>
          <!-- 优惠卷 -->
          <!-- 活动 -->
          <!-- 已选择 奶茶 -->
          <!-- 用户评价 -->
        </div>
        <div class="user-commmet-con">
          <div class="user-comment">
            <span>用户评价:{{ reviews.sumCount }}</span>
            <p>
              好评: <span>{{ reviews.replyChance }}</span>
              <van-icon name="arrow" size="14px" color="#7a7a7a" />
            </p>
          </div>
          <!-- 用户评价的个人信息 -->
          <div class="user-info" v-if="reviews.productReply">
            <img :src="reviews.productReply.avatar" alt="" />
            <div class="user-avatar">
              <p>{{ reviews.productReply.nickname }}</p>
              <span>规格:{{ reviews.productReply.sku }}</span>
              <p>{{ reviews.productReply.uid }}</p>
            </div>
            <p>{{ reviews.productReply.createTime }}</p>
          </div>
        </div>
        <!-- 优品推荐 -->
        <div class="products-list">
          <h3>优品推荐</h3>
          <div class="products-con" v-if="products">
            <div
              class="products-display"
              v-for="item in products.slice(0, 6)"
              :key="item.id"
            >
              <img :src="item.image" alt="" />
              <p>{{ item.storeName }}</p>
              <span><em>￥</em>{{ item.price }}</span>
            </div>
          </div>
        </div>
        <!-- 产品详情 -->
        <div class="product-bottom">
          <h3>产品详情</h3>
          <div class="product-con-list" v-html="details.content"></div>
        </div>
        <!-- 底部tarbar -->
        <div class="tarbar">
          <div class="service">
            <van-goods-action>
              <van-goods-action-icon
                icon="chat-o"
                text="客服"
                color="#ee0a24"
              />
              <van-goods-action-icon icon="cart-o" text="购物车" />
              <van-goods-action-icon
                icon="star"
                text="已收藏"
                color="#ff5000"
              />
              <van-goods-action-button
                type="warning"
                text="加入购物车"
                color="#be99ff"
              />
              <van-goods-action-button
                type="danger"
                text="立即购买"
                color="#7232dd"
              />
            </van-goods-action>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductDetails",

  data() {
    return {
      value: "", // 搜索
      details: "", // 商品详情数据
      detailscon: "", // 轮播图
      pageId: null, // 传参初始为null
      reviews: "", // 用户评价
      products: "", // 优品推荐
      initImageWidth: true,
    };
  },
  updated() {
    if (this.initImageWidth) {
      Array.from(document.querySelectorAll(".product-bottom img")).forEach(
        (img) => {
          img.style.width = "100vw";
        }
      );
      this.initImageWidth = false;
    }
  },

  methods: {},
  async created() {
    this.pageId = this.$route.query.id;
    const token = sessionStorage.getItem("token") || undefined; // 声明token
    if (token) {
      // 轮播图
      await this.$requestTools(
        `/crmeb/product/detail/${this.pageId}?type=normal`,
        "GET",
        {
          headers: {
            "authori-zation": token,
          },
        }
      ).then((data) => {
        this.detailscon = data.data.data.productInfo.sliderImage;
        this.detailscon = JSON.parse(this.detailscon);
        console.log(this.detailscon);
        this.details = data.data.data.productInfo;
      });

      /* 用户评价 */
      // https://apif.java.crmeb.net/api/front/reply/product/${普通商品id}
      await this.$requestTools(`/crmeb/reply/product/${this.pageId}`, "GET", {
        headers: {
          "authori-zation": token,
        },
      }).then((data) => {
        this.reviews = data.data.data;
        // console.log(this.reviews);
      });
      /* 优品推荐 */
      //https://apif.java.crmeb.net/api/front/product/good
      await this.$requestTools("/crmeb/product/good", "GET", {
        headers: {
          "authori-zation": token,
        },
      }).then((data) => {
        this.products = data.data.data.list;
        // console.log(this.products);
      });
    }
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.productDetails {
  overflow-y: scroll;
  height: calc(100vh - 51px);
  position: relative;
  /* 搜索框 */
  .product-search-swiper {
    display: flex;
    justify-content: space-around;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 1000;
    .product-search {
      width: 70%;
      height: 50px;
      ::v-deep .van-search {
        padding-left: 10px; // 不生效
        background: transparent;
        .van-field__control::-webkit-input-placeholder {
          /* WebKit browsers，webkit内核浏览器 */
          color: #666;
          font-size: 13px;
        }
        .van-field__control::-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #666;
          font-size: 13px;
        }
      }
      ::v-deep .van-search__content {
        background-color: hsla(0, 0%, 100%, 0.3);
      }
    }
    .s-left,
    .s-right {
      width: 29px;
      height: 29px;
      border-radius: 50%;
      background: hsla(0, 0%, 100%, 0.3);
      text-align: center;
      line-height: 29px;
    }
    .s-left {
      margin-left: 10px;
      ::v-deep .van-field__left-icon {
        margin-left: 10px;
      }
    }
    .s-right {
      margin-right: 10px;
    }
  }
  /* 轮播图 */
  .product-swiper {
    img {
      width: 100%;
    }
  }
  /* 商品详情0.01 */
  .goods-info {
    .goods-info-con {
      .goods-wrap {
        width: 88%;
        margin: 0 auto;
        margin-top: 15px;
        background-color: white;
        padding: 10px;
        .info-prict {
          span {
            font-weight: 700;
            color: #ff448f;
            font-size: 28px;
            em {
              font-size: 14px;
              font-style: normal;
            }
          }
        }
        .good-sales {
          display: flex;
          justify-content: space-between;
          p {
            font-size: 11px;
            color: #82848f;
            margin: 5px 0;
            font-style: normal;
          }
        }
      }
      .user-commmet-con {
        width: 88%;
        margin: 0 auto;
        margin-top: 15px;
        background-color: white;
        padding: 10px;
        /* 用户评价 */
        .user-comment {
          display: flex;
          span {
            color: #82848f;
          }
          p {
          }
        }
        /* 用户评价的个人信息  */
        .user-info {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
          }
          .user-avatar {
            margin-left: -73px;
            p {
              font-size: 14px;
            }
            span {
              color: #82848f;
              font-size: 14px;
            }
          }
          p {
            color: #82848f;
            font-size: 14px;
          }
        }
      }
      /* 优品推荐 */
      .products-list {
        width: 94%;
        margin: 0 auto;
        background-color: #fff;
        margin-top: 15px;
        h3 {
          padding: 10px 0;
          font-weight: normal;
          text-align: center;
        }
        .products-con {
          background-color: white;
          padding: 10px;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          .products-display {
            padding-bottom: 10px;
            img {
              width: 99px;
              height: 99px;
              border-radius: 5px;
            }
            p {
              width: 99px;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            span {
              em {
                font-size: 10px;
                font-style: normal;
              }
              color: #ff448f;
              font-size: 14px;
            }
          }
        }
      }
      /* 产品详情  */
      .product-bottom {
        h3 {
          padding: 10px 0;
          font-weight: normal;
          text-align: center;
        }
        .product-con-list {
          font-size: 0;
          img {
            display: block;
          }
        }
      }
      /* 底部tarbar */
      .tarbar {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        background-color: rgb(173, 232, 35);
      }
    }
  }
}
</style>
